import { categorySimpleList, formSimpleList, modelCreate, modelGet, modelUpdate } from "@/api/bpm/model";
import { todoApi } from "@/api/bpm/task/todo";
import { BasicDrawer, useDrawerInner } from "@/components/Drawer";
import { BasicForm, FormSchema, useForm } from "@/components/Form";
import { message } from "antd";
import { useRef } from "react";
import { useTranslation } from "react-i18next";

let reload: Function;
let id: string;
const index = (props: { register: Fn }) => {
	const { t } = useTranslation();
	const en_vi = "task.model";
	const processType = useRef(10);
	const formSchema: FormSchema[] = [
		{
			label: t(`${en_vi}.processKey`),
			field: "key",
			component: "Input",
			rules: [
				{
					required: true,
					message: t(`${en_vi}.processIdCannotBeEmpty`),
					trigger: "blur"
				}
			]
		},
		{
			label: t(`${en_vi}.processName`),
			field: "name",
			component: "Input",
			rules: [
				{
					required: true,
					message: t(`${en_vi}.processNameCannotBeEmpty`),
					trigger: "blur"
				}
			]
		},
		{
			label: t(`${en_vi}.processCategory`),
			field: "category",
			component: "ApiSelect",
			componentProps: {
				api: categorySimpleList,
				labelField: "name",
				valueField: "code"
			},
			rules: [
				{
					required: true,
					message: t(`${en_vi}.processCategoryCannotBeEmpty`),
					trigger: "blur"
				}
			]
		},
		{
			label: t(`${en_vi}.processIcon`),
			field: "icon",
			component: "FileUpload",
			componentProps: {
				maxCount: 1,
				fileType: "image"
			},
			rules: [
				{
					required: true,
					message: t(`${en_vi}.processIconCannotBeEmpty`),
					trigger: "blur"
				}
			]
		},
		{
			label: t(`${en_vi}.processDescription`),
			field: "description",
			component: "InputTextArea"
		},
		{
			label: t(`${en_vi}.processType`),
			field: "type",
			component: "Input",
			componentProps: {
				hidden: true
			}
		},
		{
			label: t(`${en_vi}.businessForm`),
			field: "formType",
			component: "RadioGroup",
			componentProps: {
				options: [
					{
						label: t(`${en_vi}.processForm`),
						value: 10
					},
					{
						label: t(`${en_vi}.businessForm`),
						value: 20
					}
				],
				onChange: (e: any) => {
					if (!e) return;
					processType.current = e;
				}
			}
		},
		{
			label: t(`${en_vi}.processForm`),
			field: "formId",
			component: "ApiSelect",
			ifShow: () => {
				return processType.current === 10;
			},
			componentProps: {
				api: formSimpleList,
				labelField: "name",
				valueField: "id"
			}
		},
		{
			label: t(`${en_vi}.formSubmitPath`),
			field: "formCustomCreatePath",
			component: "Input",
			ifShow: () => {
				return processType.current === 20;
			}
		},
		{
			label: t(`${en_vi}.formViewPath`),
			field: "formCustomViewPath",
			component: "Input",
			ifShow: () => {
				return processType.current === 20;
			}
		},
		{
			label: t(`${en_vi}.visible`),
			field: "visible",
			component: "RadioGroup",
			componentProps: {
				options: [
					{
						label: t(`${en_vi}.yes`),
						value: true
					},
					{
						label: t(`${en_vi}.no`),
						value: false
					}
				]
			}
		},
		{
			label: t(`${en_vi}.startUserIds`),
			field: "startUserIds",
			component: "ApiSelect",
			componentProps: {
				api: todoApi.simpleList,
				labelField: "nickname",
				valueField: "id",
				mode: "multiple"
			}
		},
		{
			label: t(`${en_vi}.managerUserIds`),
			field: "managerUserIds",
			component: "ApiSelect",
			componentProps: {
				api: todoApi.simpleList,
				labelField: "nickname",
				valueField: "id",
				mode: "multiple"
			}
		}
	];
	const [register, { validateFields, resetFields, setFieldsValue }] = useForm({
		schemas: formSchema,
		labelWidth: 100,
		baseColProps: {
			span: 24
		},
		initialValues: {
			managerUserIds: [1],
			visible: true,
			formType: processType.current,
			type: 10
		}
	});
	const [registerDrawer, { closeDrawer }] = useDrawerInner(props.register, async data => {
		reload = data.reload;
		resetFields();
		if (data.record) {
			id = data.record.id;
			setFieldsValue(data.record);
		}
	});
	const handleSubmit = async () => {
		try {
			let formValue = await validateFields();
			let api = modelCreate;
			if (id) {
				const { bpmnXml } = await modelGet({ id });
				console.log(bpmnXml);
				formValue = {
					...formValue,
					id,
					bpmnXml
				};
				api = modelUpdate;
			}
			const res = await api(formValue);
			if (!res) return message.error(t(`${en_vi}.operationFailure`));
			message.success(t(`${en_vi}.operationSuccess`));
			closeDrawer();
			reload();
		} catch (error) {
			message.error(
				"The process ID format is incorrect. It needs to start with a letter or underscore, followed by any letter, number, hyphen, underscore, or period!"
			);
		}
	};
	return (
		<BasicDrawer showFooter={true} {...props} register={registerDrawer} ok={handleSubmit}>
			<div>
				<BasicForm register={register}></BasicForm>
			</div>
		</BasicDrawer>
	);
};
export default index;
